<template>
    <div class="xzcs-pc-quizdata-type">
        <div class="main">
            <div class="breadcrumb">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item>
                        <nuxt-link to="/"> 首页 </nuxt-link>
                    </el-breadcrumb-item>
                    <el-breadcrumb-item>
                        <nuxt-link to="/quizdata"> 问题库 </nuxt-link>
                    </el-breadcrumb-item>
                    <el-breadcrumb-item> {{ cateName }} </el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div class="types">
                <div v-for="(items, indexs) in cateList" :key="indexs">
                    <div class="type-list">
                        <div class="type-name">{{ items.name }}</div>
                        <div class="type-right">
                            <nuxt-link
                                v-for="(item, index) in items.list"
                                :key="index"
                                class="type-item"
                                :class="{
                                    'type-item-active': item.id == typeId,
                                }"
                                :to="`/quizdata/type/${item.id}/1`"
                            >
                                {{ item.name }}
                            </nuxt-link>
                        </div>
                    </div>
                    <div v-show="indexs < 2" class="line"></div>
                </div>
            </div>

            <div class="res-data">
                <div class="wt-list">
                    <div
                        v-for="(item, index) in recommendList"
                        :key="index"
                        class="wt-item"
                    >
                        <nuxt-link
                            class="wt-title"
                            target="_blank"
                            :to="`/quizdata/${item.id}.html`"
                            >{{ item.title }}</nuxt-link
                        >
                        <div
                            class="wt-answer"
                            v-html="item.answer_content"
                        ></div>
                        <div class="wt-bottom">
                            <div v-if="item.keyword" class="wt-tags">
                                <div
                                    v-for="(val, idx) in item.keyword.split(
                                        ','
                                    )"
                                    :key="idx"
                                    class="wt-tags-item"
                                >
                                    {{ val }}
                                </div>
                            </div>
                            <div class="wt-time">
                                {{ item.createtime }}
                            </div>
                        </div>
                    </div>

                    <div v-if="all_count > limit" class="pagination">
                        <el-pagination
                            background
                            layout="prev, pager, next"
                            :total="all_count"
                            :page-size="limit"
                            :current-page.sync="page"
                            @current-change="changePage"
                        >
                        </el-pagination>
                    </div>
                </div>

                <div class="hotSearch-box">
                    <div v-if="aboutList.length > 0" class="hotSearch_list">
                        <div class="title_box flex">
                            <div class="bold fz18">
                                <span class="colore75151">推荐</span>问题
                            </div>
                        </div>
                        <el-skeleton animated :loading="aboutList.length == 0">
                            <template slot="template">
                                <div
                                    v-for="item in 7"
                                    :key="item"
                                    class="hotItem"
                                >
                                    <el-skeleton-item variant="h1" />
                                </div>
                            </template>
                        </el-skeleton>
                        <nuxt-link
                            v-for="(item, index) in aboutList"
                            :to="`/quizdata/${item.id}.html`"
                            target="_blank"
                            class="hotItem fz14 c333 ellipsis1"
                            :key="index"
                        >
                            {{ item.title }}
                        </nuxt-link>
                    </div>
                    <no-ssr>
                        <div class="wx-gzh-con">
                            <img
                                src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/xzwd-gzh-code.png"
                                alt=""
                            />
                            <div class="wx-gzh-con-text">
                                <!-- <div class="wx-gzh-con-title">
                                    免费领取<span>问答券</span>
                                </div> -->
                                关注公众号
                                <!-- ，免费领取问答券 -->
                            </div>
                        </div>
                    </no-ssr>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
import {
    newXungetSearch,
    checkviewIssue,
    getanalysedata2,
} from "@/assets/api/indexApi.js";
import {
    getHotSearch,
    get_issue_list,
    getCateList,
} from "@/assets/api/quizData";
import {
    hightLightText,
    goTopSmooth,
    getCateListName,
} from "@/assets/utils/utils.js";

export default {
    name: "quizdata",
    async asyncData({ query, params }) {
        let data = {
            recommendList: [],
            cateList: [
                {
                    name: "会计:",
                    list: [],
                },
                {
                    name: "税法:",
                    list: [],
                },
                {
                    name: "综合:",
                    list: [],
                },
            ],
            jsonld: {
                "@context": "https://ziyuan.baidu.com/contexts/cambrian.jsonld",
                "@id": "https://www.xzcs2022.com/quizdata/type/",
                images: [""],
                title: "",
                description:
                    "小竹财税问题库汇集众多关于财税问题及答案，主要解决财税从业人员在工作当中遇到的各种财税问题，免除您筛选、去杂的烦恼，目前已收录了财税问题6万多条。",
                pubDate: "2024-03-14",
                upDate: "2024-03-14",
            },

            all_count: 0,
            page: 1,
            limit: 20,
            aboutList: [],
            metaTitle2: "小竹财税问题库-【小竹财税平台】",
            cateName: "",
        };

        data.page = parseInt(params.page);
        data.typeId = parseInt(params.type);

        data.jsonld["@id"] += params.type + "/" + params.page;

        const res = await get_issue_list({
            page: data.page,
            pagesize: data.limit,
            cate_id: data.typeId,
        });
        if (res.code == 1) {
            data.recommendList = res.data;
            if (res.data.length > 0) {
                data.all_count = res.data[0].all_count;
                data.jsonld.pubDate = res.data[0].createtime;
                data.jsonld.upDate = data.jsonld.pubDate;
            }
        }

        const res1 = await getCateList({});
        if (res1.code == 1) {
            data.cateList[0].list = res1.data["1"];
            data.cateList[1].list = res1.data["2"];
            data.cateList[2].list = res1.data["3"];
            data.cateName = getCateListName(data.typeId, data.cateList);
            data.metaTitle2 =
                "小竹财税问题库-" + data.cateName + "-【小竹财税平台】";
        }
        data.jsonld.title = data.metaTitle2;

        const res2 = await get_issue_list({
            page: 1,
            pagesize: 8,
            cate_id: 0,
        });
        if (res2.code == 1) {
            data.aboutList = res2.data;
        }

        return data;
    },
    layout: "home",
    head() {
        return {
            script: [
                {
                    type: "application/ld+json",
                    innerHTML: JSON.stringify(this.jsonld), // <- set jsonld object in data or wherever you want
                },
            ],
            __dangerouslyDisableSanitizers: ["script"],
            title: this.metaTitle2,
            meta: [
                {
                    hid: "description",
                    name: "description",
                    content:
                        "小竹财税问题库汇集众多关于财税问题及答案，主要解决财税从业人员在工作当中遇到的各种财税问题，免除您筛选、去杂的烦恼，目前已收录了财税问题6万多条。",
                },
                {
                    hid: "keywords",
                    name: "keywords",
                    content: "小竹财税问题库," + this.cateName,
                },
            ],
        };
    },
    components: {},
    data() {
        return {
            keyword: "",

            token: "",
            restaurants: [],
        };
    },

    watch: {},
    created() {},
    mounted() {
        this.token = window.localStorage.getItem("token");
        this.setmenuIndex("1");

        this.$nextTick(() => {
            goTopSmooth();
        });

        getanalysedata2({
            m_id: 1,
            type: 1,
            code: "PB4",
            describe: "问题库",
        });
    },
    computed: {
        ...mapState("quiz", {}),
        ...mapState("common", {
            userInfo: (state) => state.userInfo,
        }),
    },
    methods: {
        ...mapMutations("common", ["setmenuIndex"]),
        ...mapMutations("common", ["setloginShow"]),

        createFilter(queryString) {
            return (restaurant) => {
                return (
                    restaurant.value
                        .toLowerCase()
                        .indexOf(queryString.toLowerCase()) === 0
                );
            };
        },

        async aget_issue_list() {
            const res = await get_issue_list({
                page: this.page,
                pagesize: this.limit,
                cate_id: 0,
            });
            if (res.code == 1) {
                this.recommendList = res.data;
                if (res.data.length > 0) {
                    this.all_count = res.data[0].all_count;
                }
                this.$nextTick(() => {
                    goTopSmooth();
                });
            }
        },

        //进详情
        async goDetail(item) {
            const res = await checkviewIssue({
                id: item.id,
            });
            if (res.code == -100) {
                return;
            }
            if (this.token) {
                let { href } = this.$router.resolve({
                    path: "/quizdata/" + item.id + ".html",
                });
                window.open(href, "_blank");
            } else {
                window.localStorage.removeItem("token");
                window.localStorage.removeItem("userInfo");
                this.setloginShow(true);
                this.$message({
                    message: "请先登录",
                    type: "warning",
                });
            }
        },

        // //获取热门搜索
        async getHotSearch() {
            let res = await getHotSearch();
            if (res.code == 1) {
                this.hotSearchList = res.data;
            }
        },
        //获取相关问题
        async getAboutList() {
            let res = await getAboutList({ id: this.id });
            if (res.code == 1) {
                this.hotSearchList2 = res.data;
            }
        },

        //获取搜索列表
        async goSearch() {
            if (!this.userInfo) {
                this.$confirm("该功能需要登录后使用", "提示", {
                    confirmButtonText: "去登录",
                    cancelButtonText: "再看看",
                })
                    .then(() => {
                        this.$router.push({
                            path: "/login",
                            query: {
                                url:
                                    window.location.pathname +
                                    window.location.search,
                            },
                        });
                    })
                    .catch(() => {});
                return;
            }
            if (!this.keyword) {
                this.$message({
                    message: "请输入搜索内容",
                    type: "warning",
                });
                return;
            }
            this.$router.push({
                path: "/quizdata/search",
                query: {
                    k: this.keyword,
                },
            });
        },

        querySearchHistory(queryString, cb) {
            var restaurants = this.restaurants;
            var results = queryString
                ? restaurants.filter(this.createFilter(queryString))
                : restaurants;
            // 调用 callback 返回建议列表的数据
            cb(results);
        },

        //快速搜索
        fastSearch(item) {
            this.keyword = item;
            this.goSearch(1);
        },

        toTop() {
            document.documentElement.scrollTop = 0;
        },

        async querySearch(queryString, cb) {
            if (!queryString) {
                cb([]);
                return;
            }
            const res = await newXungetSearch({
                keyword: queryString,
                type: "issue",
                page: this.page,
                limit: 5,
            });
            if (res.code == 1) {
                let list = res.data.list;
                for (let item of list) {
                    item.title = hightLightText(item.title, queryString);
                }
                cb(list);
            } else {
                cb([]);
            }
        },

        goSchoolDetails(item) {
            if (!this.userInfo) {
                this.setloginShow(true);
                return;
            }
            this.goUrlBlank({
                path: "/seefat/" + item.id + "",
            });
        },

        changePage(page) {
            this.$router.push({
                path: `/quizdata/type/${this.typeId}/${page}`,
            });
        },
    },
};
</script>

<style lang="scss">
.xzcs-pc-quizdata-type {
    background-color: #f5f5f5;
    .main {
        width: 1200px;
        margin: 0 auto;
        margin-bottom: 30px;
    }

    .breadcrumb {
        padding: 13px 0;
    }

    .res-data {
        display: flex;
        justify-content: space-between;
        margin-top: 17px;
    }

    .wt-list {
        background-color: #ffffff;
        border-radius: 6px;
        padding-top: 40px;
        width: 857px;
        padding: 0 31px;

        .wt-item {
            // width: 750px;
            padding: 40px 0 30px;
            border-bottom: 1px solid #f3f3f3;
            display: block;

            .wt-title {
                display: inline-block;
                font-size: 16px;
                font-weight: 600;
                color: #333333;
                margin-bottom: 10px;
                width: 100%;
                -webkit-line-clamp: 2;

                display: -webkit-box;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
                line-height: 1.5;
                &:hover {
                    text-decoration: underline;
                }
            }
            .wt-answer {
                display: -webkit-box;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
                -webkit-line-clamp: 2;
                font-size: 14px;
                color: #999999;
                line-height: 20px;
                &::v-deep img {
                    display: none;
                }
                img {
                    display: none;
                }
            }
            &:hover {
                .wt-title {
                    color: #2675c5;
                }
            }

            .wt-bottom {
                margin-top: 20px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                width: 100%;
                .wt-tags {
                    display: flex;
                    flex-wrap: wrap;
                    .wt-tags-item {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        // cursor: pointer;
                        min-width: 30px;
                        padding: 2px 10px;
                        height: 26px;
                        background-color: #f6f6f6;
                        color: #666;
                        font-size: 12px;
                        border-radius: 75px;
                        margin-right: 8px;
                        // &:hover {
                        //     color: #1772f6;
                        //     background-color: #e7f1fe;
                        // }
                    }
                }
                .wt-time {
                    flex: 1;
                    display: flex;
                    justify-content: flex-end;
                    font-size: 14px;
                    color: #999999;
                }
            }
        }
    }

    .types {
        background: #ffffff;
        padding: 25px 20px;
        position: relative;
        z-index: 100;
        .type-list {
            display: flex;
            position: relative;
            .type-right {
                display: flex;
                flex-wrap: wrap;
            }
            .type-name {
                width: 52px;
                min-width: 52px;
                height: 28px;
                line-height: 28px;
                text-align: center;
                background: #ebf4ff;
                color: #396ca7;
                display: block;
            }
            .type-item {
                white-space: nowrap;
                margin-left: 17px;
                height: 28px;
                line-height: 28px;
                display: block;
                color: #333333;
                font-size: 14px;
                &:hover {
                    color: #0e8ed8;
                }
            }
            .type-item-active {
                color: #1772f6;
            }
        }
        .line {
            height: 1px;
            background-color: #f0f0f0;
            margin: 15px 0;
        }
    }

    .hotSearch-box {
        margin-left: 15px;
        width: 328px;
        min-width: 328px;

        .hotSearch_list {
            // min-height: 482px;
            // height: 482px;
            background-color: #fff;
            border-radius: 6px;
            margin-bottom: 14px;

            .title_box {
                padding: 20px 30px;
                width: 328px;
                height: 60px;
                //background-image: url("../../assets/quizData/hot_bj.png");
                background-position: 100%;
                background-size: cover;
                background-repeat: no-repeat;

                img {
                    margin-right: 10px;
                    width: 16px;
                    height: 18px;
                }
            }

            .hotItem {
                cursor: pointer;
                padding: 0 30px;
                width: 100%;
                height: 50px;
                line-height: 50px;
                border-bottom: 1px solid #f5f5f5;
                background: #fff;
                display: block;
                box-sizing: border-box;
                &:hover {
                    color: #1c87f3 !important;
                    text-decoration: underline;
                }
            }
        }
        .hot-tags {
            margin-top: 14px;
            background-color: #fff;
            border-radius: 6px;
            padding: 24px 25px;
            .title {
                font-size: 18px;
                color: #333;
                font-weight: bold;
            }
            .tags {
                margin-top: 20px;
                display: flex;
                flex-wrap: wrap;
                .tags-item {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    cursor: pointer;
                    margin-bottom: 20px;
                    min-width: 30px;
                    padding: 2px 10px;
                    height: 26px;
                    background-color: #f6f6f6;
                    color: #333;
                    font-size: 12px;
                    border-radius: 75px;
                    margin-right: 8px;
                    &:hover {
                        color: #1772f6;
                        background-color: #e7f1fe;
                    }
                }
            }
        }
    }

    .wx-gzh-con {
        display: flex;
        align-items: center;
        padding: 20px 22px;
        background-color: #ffffff;
        position: sticky;
        top: 95px;
        border-radius: 6px;
        img {
            width: 100px;
            height: 100px;
            margin-right: 16px;
        }
        .wx-gzh-con-text {
            font-size: 14px;
            font-family: OPPOSans, OPPOSans;
            font-weight: 400;
            color: #666666;
            line-height: 20px;
        }
        .wx-gzh-con-title {
            font-size: 18px;
            font-family: OPPOSans, OPPOSans;
            font-weight: 500;
            color: #333333;
            line-height: 20px;
            padding-bottom: 9px;
            span {
                color: #ff4646;
            }
        }
    }

    .pagination {
        text-align: center;
        padding: 30px;
    }

    .colore75151 {
        color: #e75151;
    }
}
</style>
